<template>
	<view style="margin: 5px;">
		<u-search borderColor="#e8e8e8" @blur="search" :showAction="false" shape="square" placeholder="请输入项目名称"
			bg-color="#FFFFFF"></u-search>
	</view>
	<view style="margin: 10px 7px 0px 7px;">
		<u-row gutter="10px">
			<u-col span="12">
				<view class="datetimePicker">
					<uni-datetime-picker v-model="myDate" type="daterange" @change="dateChange" />
				</view>
			</u-col>
		</u-row>
	</view>
	<view style="margin: 15px 7px 0px 7px;">
		<u-row gutter="10px">
			<u-col span="6">
				<view class="amount">本月已完成项目数:{{0}}</view>
			</u-col>
			<u-col span="6">
				<view class="amount">本月项目奖金:{{0}}</view>
			</u-col>
		</u-row>
	</view>
	<view class="content">
		<scroll-view scroll-y="true" show-scrollbar="true" :style="{maxHeight: height + 'px'}">
			<uni-list :border="true">
				<uni-list-chat class="note-container" @click="viewDetails(item.id)" v-for="item in list.data" clickable
					:avatarShow="false" :title="item.name" :note="item.content">
					<view class="chat-custom-right">
						<view class="mycss-flex-start">
							<text class="sn">{{item.startTime + "至" + item.endTime}}</text>
					<u-tag
					    :text="item.stateName"
					    size="mini"
						plain
						:type="item.stateName=='未完成'?'error':'success'"
					>
					</u-tag>
						</view>
						<text class="ck">查看内容</text>
					</view>
				</uni-list-chat>
			</uni-list>
		</scroll-view>
	</view>
	<view style="padding: 3px 10px 0px 10px;">
		<uni-pagination title="标题文字" :value="current" :total="list.total" :pageSize="list.pageSize"
			@change="pageChange"></uni-pagination>
	</view>

</template>

<style>
	page {
		background-color: #fff;
	}
</style>

<script setup>
	import {
		ref,
		inject,
		reactive,
		watch,
		onMounted,
	} from 'vue';

	const http = inject("$http");

	const show1 = ref(false);
	const show2 = ref(false);

	const value1 = ref(Date.now());
	const value2 = ref(Date.now());

	const myDate = ref([]);

	const current = ref(1);

	const query = reactive({
		name: "",
		page: 1,
		size: 10,
		datatype: "all",
		completeTimeStartDate: "",
		completeTimeEndDate: "",
	})

	const list = reactive({
		data: [],
		total: 0,
		pageSize: 10,
	})

	const height = parseInt(uni.getSystemInfoSync().windowHeight * 0.55);

	onMounted(() => {
		getData()
	})

	function search(e) {
		query.name = e;
		query.page = 1;
		getData()
	}

	function viewDetails(id) {
		uni.navigateTo({
			url: `/pages/project-plan/components/project-details/project-details?id=${id}`
		})
	}

	function dateChange(e) {
		query.completeTimeStartDate = e[0];
		query.completeTimeEndDate = e[1];
		query.page = 1;
		getData();
	}

	function pageChange(e) {
		current.value = e.current;
		query.page = e.current;
		getData();
	}

	function getData() {
		http.post("/projectPlan/table", query).then((res) => {
			console.log(res.data.rows);
			list.data = res.data.rows
			list.total = res.data.total
		})
	}
</script>
<style scoped>
	.myRow {
		margin-top: 5px;
	}

	.datetimePicker {
		background-color: #fff;
	}

	.amount {
		border: 2px solid #d6d7d9;
		padding: 5px;
		font-size: 13px;
	}

	.content {
		margin: 20px 10px 20px 10px;
	}

	.chat-custom-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.ck {
		margin-top: 3px;
		color: #999;
		font-size: 11px;
		font-weight: normal;
	}

	.sn {
		color: #999;
		font-size: 11px;
		font-weight: normal;
		margin-right: 5px;
	}

	.note-container {
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 使用省略号来表示被隐藏的内容 */
		white-space: nowrap;
		/* 防止内容换行，保持在一行显示 */
	}
</style>